<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件导入导出</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-button @click="handleExportXls('导出信息')">导出</el-button>
    <el-upload name="file" :show-file-list="false" :multiple="false" :action="importExcelUrl"
               :on-change="handleImportExcel">
        <el-button type="primary" icon="import">导入</el-button>
    </el-upload>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                importExcelUrl: 'http://localhost:9090/excel/importExcel',
            }
        },

        methods: {
            /* 导出 */
            handleExportXls(fileName) {
                if (!fileName || typeof fileName != "string") {
                    fileName = "导出文件"
                }
                let param = {};
                console.log("导出参数", param)
                downFile('http://localhost:9090/excel/exportXls', param).then((data) => {
                    if (!data) {
                        this.$message.warning("文件下载失败")
                        return
                    }
                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(new Blob([data.data], {type: "application/vnd.ms-excel"}), fileName + '.xls')
                    } else {
                        let url = window.URL.createObjectURL(new Blob([data.data], {type: "application/vnd.ms-excel"}))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', fileName + '.xls')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link); //下载完成移除元素
                        window.URL.revokeObjectURL(url); //释放掉blob对象
                    }
                })
            },

            /* 导入 */
            handleImportExcel(file) {
                if(file.status === 'success'){
                    if(file.response.code == 200){
                        this.$message({     //文件导入成功提示
                            message: file.response.message,
                            type: 'success'
                        });
                    }else{
                        this.$message.error(file.response.message);
                    }
                }
            },
        },
    })

    /**
     * 下载文件 用于excel导出
     * @param url
     * @param parameter
     * @returns {*}
     */
    function downFile(url, parameter) {
        return axios({
            url: url,
            params: parameter,
            method: 'get',
            responseType: 'blob'
        })
    }
</script>
</body>
</html>